import { Avatar, Button, Flex, Layout, Tag, Tooltip } from "antd";
import logo from '@/assets/images/logo-universal.png'
import { useAppContext } from "@/context/AppContext";
import { useTranslation } from "react-i18next";
import { WindowMinimise, WindowMaximise, WindowUnmaximise, Quit, WindowSetAlwaysOnTop } from 'wails/runtime/runtime';
import { useEffect, useRef, useState } from "react";
import {
    CloseIcon,
    ExpandIcon,
    LanguageIcon,
    MinusIcon,
    PushpinIcon,
    ShrinkIcon,
    ThemeIcon
} from "@/lib";
const Header = () => {
    const [t] = useTranslation();
    const { themeChange, handleLanguageChange, handleMenuSelect } = useAppContext();
    const [isMaximized, setIsMaximized] = useState(false);
    const [isTop, setIsTop] = useState(false);
    // 设置拖动
    const [isDragging, setIsDragging] = useState(false);
    const dragStartPosition = useRef({ x: 0, y: 0 })
    // 设置置顶
    const isTopHandle = () => {
        setIsTop(!isTop);
        WindowSetAlwaysOnTop(isTop)
    }
    // 窗口最大化
    const resizeWindow = () => {
        if (isMaximized) {
            WindowUnmaximise();
        } else {
            WindowMaximise()
        }
        setIsMaximized(!isMaximized);
    }
    // 拖动开始
    const handleMouseDown = (e: React.MouseEvent) => {
        setIsDragging(true);
        dragStartPosition.current = {
            x: e.clientX,
            y: e.clientY,
        }
    }
    // 拖动中
    const handleMouseMove = (e: MouseEvent) => {
        if (!isDragging) return;
        // 如果窗口是最大化，拖动时自动还原
        if (isMaximized) {
            WindowUnmaximise();
            setIsMaximized(false);
        }
    }
    // 拖动结束
    const handleMouseUp = () => {
        setIsDragging(false);
    }
    // 全局监听鼠标事件
    useEffect(() => {
        if (isDragging) {
            window.addEventListener('mousemove', handleMouseMove);
            window.addEventListener('mouseup', handleMouseUp);
        }
        return () => {
            window.removeEventListener('mousemove', handleMouseMove);
            window.removeEventListener('mouseup', handleMouseUp);
        }
    }, [isDragging]);
    // 主题切换
    const themeMap = ['light', 'dark']
    // 语言切换
    const langMap = ["en", "zh"]
    return (
        <Layout.Header
            style={{
                padding: '8px',
                display: 'flex',
                alignItems: 'center',
                ['--wails-draggable' as any]: 'drag',
            }}
            onMouseDown={handleMouseDown}
        >
            <Tooltip title={<Tag color='green'>{t('header:desc')}</Tag>}>
                <Avatar src={logo} />
            </Tooltip>
            <div style={{ marginLeft: '10px', color: '#fff', textAlign: 'left' }}>
                Kafka-UI
            </div>
            <Flex
                justify="flex-end"
                style={{
                    position: 'fixed',
                    right: 0,
                    top: 0,
                    ['--wails-draggable' as any]: 'no-drag'
                }}
                className="right-section">
                <Tooltip title={(
                    <Flex vertical={true}>
                        {langMap.map((lang) => (
                            <Button
                                key={lang}
                                onClick={() => handleLanguageChange?.(lang)}
                            >
                                {t(`language:${lang}`)}
                            </Button>
                        ))}
                    </Flex>
                )}>
                    <Button type="text" icon={<LanguageIcon />} />
                </Tooltip>
                <Tooltip title={(
                    <Flex vertical={true}>
                        {themeMap.map((theme) => (
                            <Button
                                key={theme}
                                onClick={() => themeChange?.(theme)}
                            >
                                {t(`theme:${theme}`)}
                            </Button>
                        ))}
                    </Flex>
                )}>
                    <Button type="text" icon={<ThemeIcon fill="#ffffff" />} />
                </Tooltip>
                <Tooltip title={isTop ? (<Tag>{t('header:top')}</Tag>) : (<Tag>{t('header:unTop')}</Tag>)}>
                    <Button type="text" icon={<PushpinIcon />} onClick={isTopHandle} />
                </Tooltip>
                <Button type="text" icon={<MinusIcon />} onClick={WindowMinimise} />
                <Button type="text" icon={isMaximized ? <ShrinkIcon /> : <ExpandIcon />} onClick={resizeWindow} />
                <Button type="text" icon={<CloseIcon />} onClick={Quit} />
            </Flex>
        </Layout.Header>
    )
}
export default Header;